<template>
    <div id="message">
        <div class="message-aside">
            <div class="message-a-user" v-for="item of userList" @click="ChooseUser(item)">
                <div class="message-a-u-img">
                    <img :src="item.portraitSrc">
                </div>
                <div class="message-a-u-name">{{ item.userName }}</div>
            </div>
        </div>
        <div class="message-main">
            <div class="message-main-content">
                <ul class="message-m-c-ul" ref="messageUL">
                    <li v-for="(item, index) of data" :key="index"
                        :class="IsUser(item) ? 'message-m-c-u-li-right' : 'message-m-c-u-li-left'">
                        <div class="text-img">
                            <img :src="item.sendPortraitSrc">
                        </div>
                        <span class="text">{{ item.messageContent }}</span>
                    </li>
                </ul>
            </div>
            <div class="message-main-text">
                <el-input :disabled="!receiverID.length" type="textarea" placeholder="请输入内容" v-model="text" class="textarea"
                    maxlength="1000" show-word-limit style="width: 100%;height: 100%;"
                    :autosize="{ minRows: 8, maxRows: 8 }" :rows="8"></el-input>
                <button @click="sendMessage()"> enter\发送</button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'message',
        data() {
            return {
                message: new Map(),
                text: '',
                data: [],
                userList: [],
                receiverID: '',
                currentMessage: ''
            }
        },
        computed: {

        },
        methods: {
            /**
             * 
             * @param {KeyboardEvent} event 
             */
            sendEnter(event) {
                this.data.push({
                    messageContent: this.text
                })
            },
            sendMessage() {
                if (this.text.trim()) {
                    this.$socket_send(this.text, {
                        sendID: JSON.parse(localStorage.getItem('HuiLY')).userinfo.id,
                        receiverID: this.receiverID
                    }).then(() => {
                        this.text = ''
                    }).catch((error) => {
                        console.error(error);
                    })
                } else {
                    this.$message({
                        duration: 1000,
                        type: 'warning',
                        message: '不能发送空信息'
                    })
                }
            },
            IsUser(item) {
                return item.sendID == JSON.parse(localStorage.getItem('HuiLY')).userinfo.id
            },
            GetStar() {
                let loading = this.$loading({
                    target: '#message'
                })
                this.$GET('/user/getStar', { userID: JSON.parse(localStorage.getItem('HuiLY')).userinfo.id })
                    .then((response) => {
                        this.userList = response.data.data
                        setTimeout(() => {
                            loading.close()
                        }, 500);
                    })
            },
            ChooseUser(item) {
                this.currentMessage = item
                this.receiverID = item.id
                this.$GET('/message/getMessageList', { sendID: JSON.parse(localStorage.getItem('HuiLY')).userinfo.id, receiverID: item.id })
                    .then((response) => {
                        console.log(response.data);
                        this.data = response.data.data
                        this.$nextTick(() => {
                            this.$refs.messageUL.scrollTop = this.$refs.messageUL.scrollHeight
                        })
                    }).catch(() => { })
            }
        },
        mounted() {
            this.$socketEventMessageEmitter.on('socketMessage', () => {
                this.ChooseUser({ id: this.receiverID })
            })
            this.GetStar()
            this.$_initWebSocket({ userID: JSON.parse(localStorage.getItem('HuiLY')).userinfo.id }).then((socket) => {
                Vue.prototype.$socket = socket
            }).catch(_ => { })
        },
        activated() {
            this.GetStar()
            this.$_initWebSocket({ userID: JSON.parse(localStorage.getItem('HuiLY')).userinfo.id }).then((socket) => {
                Vue.prototype.$socket = socket
            }).catch(_ => { })
        }
    }
</script>

<style scoped lang="less">
    #message {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        overflow: hidden;

        .message-aside {
            width: 200px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            overflow-y: scroll;
            padding: 10px;

            &::-webkit-scrollbar {
                width: 0;
                height: 0;
                background-color: transparent;
            }

            .message-a-user {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                padding: 10px 5px;
                margin: 10px 0px;
                border: 1px solid rgba(10, 10, 10, .5);
                box-shadow: 5px 5px 5px var(--main-box-shadow-color);
                border-radius: 15px;

                &:hover {
                    box-shadow: 5px 5px 5px var(--main-bg-color);
                }

                .message-a-u-img {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    border: 1px solid var(--main-bg-color);
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                .message-a-u-name {
                    padding: 5px;
                    font-size: 16px;
                    text-align: center;
                    line-height: 1.2em;
                }
            }
        }

        .message-main {
            flex-grow: 1;
            width: 1000px;
            height: 95%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: auto;
            border: 1px solid rgba(10, 10, 10, .2);
            box-shadow: 5px 5px 5px var(--main-box-shadow-color);

            .message-main-content {
                width: 100%;
                height: 70%;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding: 10px;

                .message-m-c-ul {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    overflow-y: scroll;

                    &::-webkit-scrollbar {
                        display: block;
                        width: 5px;
                        height: 100%;
                        background-color: transparent;
                        position: absolute;
                        right: 1px;
                        top: 1px;
                    }

                    .message-m-c-u-li-right {
                        display: flex;
                        flex-direction: row-reverse;
                        width: 200px;
                        font-size: 16px;
                        text-align: left;
                        margin: 10px;
                        padding: 5px;
                        line-height: 1.5em;
                        align-self: flex-end;
                        border: 1px solid var(--main-bg-color);
                        box-shadow: 2px 2px 2px var(--main-box-shadow-color);

                        &>.text {
                            flex-grow: 1;
                            text-align: right;
                        }
                    }

                    .message-m-c-u-li-left {
                        display: flex;
                        flex-direction: row;
                        width: 200px;
                        font-size: 16px;
                        text-align: left;
                        padding: 5px;
                        margin: 10px;
                        line-height: 1.5em;
                        align-self: flex-start;
                        border: 1px solid var(--main-bg-color);
                        box-shadow: 2px 2px 2px var(--main-box-shadow-color);

                        &>.text {
                            flex-grow: 1;
                            text-align: left;
                        }
                    }

                    .text-img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        border: 1px solid var(--main-bg-color);
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center;
                        }
                    }
                }
            }

            .message-main-text {
                align-self: flex-start;
                display: flex;
                width: 100%;
                position: relative;

                button {
                    // width: 80px;
                    height: 25px;
                    font-size: 20px;
                    line-height: 25px;
                    position: absolute;
                    top: 7%;
                    right: 1%;
                }
            }
        }
    }
</style>